<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Embeddable Apps - Raxan User Guide</title>
    <link href="../raxan/ui/css/master.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 8]> <link rel="stylesheet" href="../raxan/ui/css/master.ie.css" type="text/css"><![endif]-->
    <link href="../raxan/ui/css/default/theme.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="highlight/styles/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="highlight/highlight.js"></script>
    <script type="text/javascript">
        <!--
        hljs.initHighlightingOnLoad('javascript','html','php','css');
        //-->
    </script>
    <!--[if lt IE 7]>
        <style type="text/css"> form input.textbox { height: 26px; }</style>
    <![endif]-->
</head>

<body>
    <div class="container">
        <div id="header" class="rax-header-pal rax-metalic">
            <h2 class="ltm bottom c14">Raxan User Guide</h2>
            <ul>
                <li><a href="../../index.html">Home</a></li>
                <li><a href="index.html">Overview</a></li>
                <li><a href="features.html">Features</a></li>
                <li><a href="table-of-contents.html" title="Table of Content">Contents</a></li>
                <li><a href="../examples">Examples</a></li>
            </ul>
            <ul class="search">
                <li>
                    <form class="tpm c9" name="form1" action="../tools/search.php" method="get">
                        <input class="c6 textbox round left" placeholder="Search" type="text" name="q" value="" title="Search User Guide"  />
                        <input class="c2 button round left ltm" type="submit" value="Go" />
                    </form>
                </li>
            </ul>

        </div>
        <hr class="space"/>
        <div class="master-content-wrapper">
            <div class="container prepend-top c48 master-content"><h2>Embeddable Applications</h2>

<p>Raxan makes it possible to embed an Ajax application within another web page or application. With embeddable apps developers can use Raxan to
extend or enhance their existing web pages without having to make any major changes or convert or port the entire web page to into PHP.</p>

<h3>Other Benefits:</h3>

<ol>
<li>Embeddable apps can be used with static or dynamically generated web pages such as those generated by other languages such as Perl, JSP, ASP, ASP.Net, Ruby, Python, etc. </li>
<li>They can also be used to manipulate and traverse the client-side DOM elements within a web page. This means that an application can be designed to add or remove elements as the user interacts with the web page.</li>
</ol>

<p>Creating an embedded application is the same as creating a typical Raxan for PHP Ajax web page. The one thing to bear in mind is that the application will only communicate with the client's browser via Ajax after first load. Full page post-backs are not recommended for embedded applications.</p>

<h4><strong>Emebedded Hello World app</strong></h4>

<p>This will add a button to the web page and will then display the 'Hello World' message when the button is clicked.</p>

<pre><code class="php">&lt;?php 
    require_once("raxan/pdi/autostart.php");

    class EmbeddedApp extends RaxanWebPage {
        protected function buttonClick(){
            // use the CLX to sent and alert action script to the client
            c()-&gt;alert('Hello World!!! - PHP Rules!');
        }
    }
?&gt;
&lt;button id="button" xt-bind="#click,buttonClick"&gt;Click Me!&lt;/button&gt;
</code></pre>

<p>To load the above application inside your web page you only need to add a single script tag with the <strong>?embed[js]</strong> query string as shown below:</p>

<pre><code class="javascript">&lt;script type="text/javascript" src="hello.php?embed[js]"&gt;&lt;/script&gt;
</code></pre>

<p>Using the above you can pass special instructions to the app to prevent it from loading external CSS or JavaScript files:</p>

<pre><code class="javascript">&lt;script type="text/javascript" src="hello.php?embed[js]=noxcss,noxjs"&gt;&lt;/script&gt;
</code></pre>

<p>The noxcss option will prevent the loading of all external css files, while noxjs will prevent the loading of all external JavaScript files. These options will come in handy if you have already loaded a specific script of css file.</p>

<h3>Sending Content To The Client</h3>

<p>The appendToClient(), prependToClient, replaceClient() and updateClient() methods provide a convenient way for developers to transfer DOMs elements
from the server to the client. Let's say you wanted to create a div on the server and then add the div inside an element called "sidebar", here's how
it could be done in a single line:</p>

<pre><code class="php">&lt;?php
    $div = $this['&lt;div id="box1" class="box" /&gt;'];
    $div-&gt;appendToClient('#sidebar');
?&gt;
</code></pre>

<p>You can also use the c() function to make jQuery calls from the server. For example: c('#sidebar')->html('This is a message from PHP');</p>

<hr class="clear" />

<p align="right">Up Next: <a href="degradable-pages.html" title="Creating Degradable Web Pages">Creating Degradable Web Pages</a> </p>
</div>
            
            <div id="footer" class="container c48 rax-active-pal round rax-glossy">
                <ul class="clearfix">
                    <li><a href="index.html">Overview</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="new-features.html">What's new</a></li>
                    <li><a href="table-of-contents.html" title="Table of Content">Contents</a></li>
                    <li><a href="../examples">Examples</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

